<template>
  <div class="pc-nav">
    <div class="top-bar-container">
      <div class="top-bar">
        <div class="top-bar-left">
          <div class="logo-bar">
            <div>定制服务</div>
          </div>
          <div class="top-bar-left-help">
            <a class data-url="home/index" href="javascript:">梦数互动欢迎你！</a>
          </div>
        </div>
        <div class="top-bar-right">
          <div class>
            <el-button @click="openLoginDialog('signUp')" class="top-signIn" type="text">登录</el-button>
            <!--                        <a href="javascript:" class="" data-url="home/index" target="self">-->
            <!--                            -->
            <!--                        </a>-->
          </div>
          <div class>
            <el-button @click="openLoginDialog('signIn')" class="top-signUp" type="text">注册</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="menu-bar-container">
      <div class="menu-bar">
        <div class="menu-bar-left">
          <div class="logo"></div>
        </div>
        <div class="menu-bar-right">
          <ul>
            <li @click="navSwitch" class="nav_item selected" data-id="index">
              <router-link to="/home">首页</router-link>
              <!--                        <a href="javascript:" class="jsUrlLink" data-url="home/index" target="self">-->
              <!--                            首页-->
              <!--                        </a>-->
            </li>
            <li @click="navSwitch" class="nav_item" data-id="index">
              <router-link to="/product">产品</router-link>
              <!--                            <a href="/html/product" class="jsUrlLink" data-url="home/index" target="self">-->
              <!--                                产品-->
              <!--                            </a>-->
            </li>
            <li @click="navSwitch" class="nav_item" data-id="index">
              <router-link to="/price">定价</router-link>
              <!--                        <a href="javascript:" class="jsUrlLink" data-url="home/index" target="self">-->
              <!--                            定价-->
              <!--                        </a>-->
            </li>
            <li @click="navSwitch" class="nav_item" data-id="index">
              <router-link to="/resolve">解决方案</router-link>
              <!--                        <a href="javascript:" class="jsUrlLink" data-url="home/index" target="self">-->
              <!--                            解决方案-->
              <!--                        </a>-->
            </li>
            <!-- <li @click="navSwitch" class="nav_item" data-id="index"> -->
            <!-- <router-link to="/demo">案例演示</router-link> -->
            <!--                        <a href="javascript:" class="jsUrlLink" data-url="home/index" target="self">-->
            <!--                            案例演示-->
            <!--                        </a>-->
            <!-- </li> -->
            <li @click="navSwitch" class="nav_item" data-id="index">
              <router-link to="/help">帮助中心</router-link>
              <!--                        <a href="javascript:" class="jsUrlLink" data-url="home/index" target="self">-->
              <!--                            帮助中心-->
              <!--                        </a>-->
            </li>
            <li @click="navSwitch" class="nav_item" data-id="index">
              <router-link to="/about">关于我们</router-link>
              <!--                        <a href="javascript:" class="jsUrlLink" data-url="home/index" target="self">-->
              <!--                            关于我们-->
              <!--                        </a>-->
            </li>
          </ul>
        </div>
      </div>
    </div>
    <login :dialogVisible="dialogVisible" :isSignIn="isSignIn" @close="closeDialog"></login>
  </div>
</template>

<script>
import banner_1 from '../../assets/imgs/banner_1.jpg';
import banner_2 from '../../assets/imgs/banner_2.png';
import banner_3 from '../../assets/imgs/banner_3.png';

import login from './login';
import { htmlRoutersConfig } from '../../router/routerConfig';
export default {
    name: 'pc-nav',
    components: {
        login,
    },
    data() {
        return {
            bannerList: [
                { src: banner_1 },
                { src: banner_2 },
                { src: banner_3 },
            ],
            carouselHeight: 500,
            dialogVisible: false,
            account: {
                username: '',
                password: '',
                nickName: '',
                mobile: '',
            },
            isLoging: false,
            isRemember: true,
            keys: 1,
            signUp: false,
            rules: {
                nickName: [
                    { required: true, message: '请输入昵称', trigger: 'blur' },
                ],
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    {
                        pattern: /^\S+$/,
                        message: '账号不能含有空格',
                        trigger: 'blur',
                    },
                    {
                        min: 6,
                        message: '账号不能少于 6 个字符',
                        trigger: 'blur',
                    },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                mobile: [
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur',
                    },
                    {
                        pattern: /^[1][345678][0-9]{9}/,
                        message: '手机号格式不正确',
                        trigger: 'change',
                    },
                ],
            },
            tabPosition: 'top',

            activeSceneItem: '2',
            caseIndex: 0,
            qrCodeUrl: '',
            htmlRoutersConfig: htmlRoutersConfig,
            isSignIn: '',
        };
    },
    beforeMount() {},
    mounted() {
        sessionStorage.clear();
        // let cookieStr = this.getCookie('account');
        // if (cookieStr) {
        //     let account = JSON.parse(cookieStr);
        //     this.account.username = account.username;
        //     this.account.password = account.password;
        // } else {
        //     this.isRemember = false;
        // }

        if (this.$route.fullPath) {
            let find = this.htmlRoutersConfig.find(item => {
                return item.path === this.$route.fullPath;
            });
            if (find) {
                let navItem = document.getElementsByClassName('nav_item');
                if (navItem && navItem[0]) {
                    navItem = Array.from(navItem);
                    for (let ii in navItem) {
                        navItem[ii].classList.remove('selected');
                        if (navItem[ii].children && navItem[ii].children[0]) {
                            let href = navItem[ii].children[0].getAttribute(
                                'href'
                            );
                            if (href) {
                                if (find.path === '/' + href.split('/')[1]) {
                                    navItem[ii].classList.add('selected');
                                }
                            }
                        }
                    }
                }
            }
        }
    },
    methods: {
        showSignUp() {
            this.signUp = !this.signUp;
        },
        handleLogin() {
            if (this.signUp) {
                this.$refs.ruleForm.validate(res => {
                    if (res) {
                        this.$message.success(JSON.stringify(res));
                        let param = {
                            uname: this.account.nickName,
                            emailVarchar: this.account.username,
                            passwordVarchar: this.account.password,
                            tel: this.account.mobile,
                        };
                        this.$api.post(
                            '/cj_user/register',
                            param,
                            success => {
                                this.$message.success('注册成功');
                                // console.log(success);
                            },
                            fal => {
                                this.$message.error(fal);
                            }
                        );
                    } else {
                        return false;
                    }
                });
            } else {
                if (!this.account.username || !this.account.password) {
                    return this.$message.warning('用户名和密码不能为空');
                }
                this.isLoging = true;
                let params =
                    'username=' +
                    encodeURIComponent(this.account.username) +
                    '&password=' +
                    encodeURIComponent(this.account.password) +
                    '&rememberMe=' +
                    this.isRemember;
                // this.$router.push({ path: '/index' });
                this.$api.post(
                    '/security/login',
                    params,
                    success => {
                        if (this.isRemember) {
                            let account = JSON.stringify(this.account);
                            this.setCookie('account', account, 3);
                        } else {
                            this.setCookie('account', '');
                        }
                        let name = {
                            username: this.account.username,
                            nickName: success,
                        };
                        sessionStorage.setItem('account', JSON.stringify(name));
                        this.isLoging = false;
                        // this.$message.success('登录成功');
                        let q = this.getQuery();
                        if (q && q.formId) {
                            this.$router.push({
                                path: '/qrCodeTypeIn',
                                query: { formId: q.formId },
                            });
                        } else {
                            this.$router.push({ path: '/index' });
                        }
                    },
                    fal => {
                        this.isLoging = false;
                        this.$message.error(fal);
                    }
                );
            }
        },
        getCookie(cname) {
            var name = cname + '=';
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i].trim();
                if (c.indexOf(name) === 0) {
                    return this.strUncode(c.substring(name.length, c.length));
                }
            }
            return '';
        },
        setCookie(cname, cvalue, exdays) {
            var d = new Date();
            d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
            var expires = 'expires=' + d.toGMTString();
            document.cookie =
                cname + '=' + this.strEncode(cvalue) + '; ' + expires;
        },
        getQuery() {
            let param = {};
            let str = window.location.href.split('?');
            if (str.length === 2) {
                let strArr = window.location.href.split('?')[1].split('&');
                strArr.forEach(item => {
                    let s = item.split('=');
                    s.length === 2 ? (param[s[0]] = s[1]) : null;
                });
            }
            // console.log(param);
            return param;
        },
        strEncode(code) {
            var c = String.fromCharCode(code.charCodeAt(0) + code.length);
            for (let i = 1; i < code.length; i++) {
                c += String.fromCharCode(
                    code.charCodeAt(i) + code.charCodeAt(i - 1)
                );
            }
            return encodeURIComponent(c);
        },
        strUncode(code) {
            code = decodeURIComponent(code);
            var c = String.fromCharCode(code.charCodeAt(0) - code.length);
            for (var i = 1; i < code.length; i++) {
                c += String.fromCharCode(
                    code.charCodeAt(i) - c.charCodeAt(i - 1)
                );
            }
            return c;
        },
        activeSceneKindClick(e) {
            let id = e.currentTarget.dataset.id;
            let nodeList = e.currentTarget.parentNode.children;
            nodeList = Array.from(nodeList);
            for (let ii in nodeList) {
                nodeList[ii].classList.remove('selected');
            }
            e.currentTarget.classList.add('selected');
            this.activeSceneItem = id;
        },
        liveCaseItemCLick(e) {
            // let id = e.currentTarget.dataset.id;
            let nodeList = e.currentTarget.parentNode.children;
            nodeList = Array.from(nodeList);
            for (let ii in nodeList) {
                nodeList[ii].classList.remove('selected');
            }
            e.currentTarget.classList.add('selected');
        },
        liveCaseSwitch(value) {
            // let nodeList = e.currentTarget.parentNode.parentNode.children;
            // nodeList = Array.from(nodeList);
            // for(let ii in nodeList){
            //     nodeList[ii].classList.remove('selected')
            // }
            // e.currentTarget.parentNode.classList.add('selected');
            this.cooperateCaseListThree.forEach(item => {
                item.selected = '';
                if (value.price === item.price) {
                    item.selected = 'selected';
                }
            });

            this.caseIndex = value.price;
        },
        userAppraiseSwitch(value) {
            this.userAppraiseImages.forEach(item => {
                item.selected = '';
                if (value.price === item.price) {
                    item.selected = 'selected';
                }
            });

            this.userAppraiseIndex = value.price;
        },
        userAppraiseItemCLick(e) {
            let nodeList = e.currentTarget.parentNode.children;
            nodeList = Array.from(nodeList);
            for (let ii in nodeList) {
                nodeList[ii].classList.remove('selected');
            }
            e.currentTarget.classList.add('selected');
        },
        createQrcode(value) {
            QRCode.toDataURL(value)
                .then(url => {
                    this.qrCodeUrl = url;
                })
                .catch(err => {
                    console.error(err);
                });
        },
        navSwitch(e) {
            let nodeList = e.currentTarget.parentNode.children;
            nodeList = Array.from(nodeList);
            for (let ii in nodeList) {
                nodeList[ii].classList.remove('selected');
            }
            e.currentTarget.classList.add('selected');
        },
        closeDialog(a) {
            this.dialogVisible = !1;
            this.$emit('showLogin', false);
        },
        openLoginDialog(a) {
            this.dialogVisible = !0;
            this.$emit('showLogin', true);
            this.isSignIn = a === 'signIn';
        },
    },
};
</script>

<style lang="scss">
.pc-nav {
    .top-bar-container {
        background: #0c0c0c;
        .top-bar {
            display: flex;
            font-family: Microsoft YaHei;
            width: 1200px;
            margin: 0 auto;
            position: relative;
            .top-bar-left {
                display: flex;
                width: 50%;
                .logo-bar {
                    height: 40px;
                    // width: 160px;
                    width: 100px;
                    background-size: contain;
                    text-align: center;
                    position: relative;
                    & > div {
                        position: absolute;
                        width: 100%;
                        height: 25px;
                        line-height: 20px;
                        top: 50%;
                        left: 0;
                        transform: translateY(-45%);
                        text-indent: 5px;
                        background: url('../../assets/imgs/spritpng.png') -17px -10px;
                        font-size: 12px;
                    }
                }
                .top-bar-left-help {
                    height: 40px;
                    line-height: 40px;
                    font-size: 12px;
                    margin-left: 30px;
                    a {
                        color: #af7835;
                        cursor: default;
                    }
                }
            }
            .top-bar-right {
                display: flex;
                font-size: 12px;
                line-height: 40px;
                position: absolute;
                right: 0;
                .top-signIn {
                    width: 90px;
                    color: #fff;
                }
                .top-signUp {
                    color: #fff;
                    width: 90px;
                    background: #1994fa;
                    height: 100%;
                    border-radius: 0;
                    line-height: normal;
                }
                .top-signUp:hover,
                .top-signIn:hover {
                    filter: brightness(1.3);
                }
                a {
                    color: #ffffff;
                }
            }
        }
    }

    .menu-bar-container {
        .menu-bar {
            width: 1200px;
            margin: 0 auto;
            display: flex;
            .menu-bar-left {
                width: 55%;
                display: flex;
                align-items: center;
                .logo {
                    width: 130px;
                    height: 39px;
                    background: url('../../assets/imgs/home/logo1.png');
                }
            }
            .menu-bar-right {
                width: 45%;
                ul {
                    display: flex;
                    height: 52px;
                    justify-content: space-between;
                    li.nav_item {
                        list-style: none;
                        line-height: 50px;
                        font-size: 14px;
                        font-family: Microsoft YaHei, serif;
                        font-weight: bolder;
                        border-bottom: 2px solid transparent;
                        a {
                            display: block;
                        }
                        &:hover {
                            color: #1994fa;
                            border-bottom: 2px solid #1994fa;
                        }
                        &.selected {
                            border-bottom: 2px solid #1994fa;
                            transition: all 0.1s ease-in-out;
                            a {
                                color: #1994fa;
                            }
                        }
                    }
                }
            }
        }
    }
}

// 小于1200px
@media screen and (max-width: 1200px) {
    .pc-nav {
        .top-bar-container {
            .top-bar {
                width: 100%;
            }
        }
        .menu-bar-container {
            .menu-bar {
                width: 100%;
            }
        }
    }
}

// 小于768
@media screen and (max-width: 768px) {
    .pc-nav {
        .top-bar-container {
            .top-bar {
                width: 100%;
                .top-bar-left {
                    width: 55%;
                    .top-bar-left-help {
                        margin-left: 0;
                    }
                }
            }
        }
        .menu-bar-container {
            .menu-bar {
                width: 100%;
                .menu-bar-left {
                    width: 0%;
                }
                .menu-bar-right {
                    width: 100%;
                    ul {
                        height: 40px;
                        li.nav_item {
                            line-height: 40px;
                        }
                    }
                }
            }
        }
    }
}
</style>